<template>
  <div>
    <page-tools>
      <template #left>
        <div class="tips">
          <i class="el-icon-info" />
          <span>本月: 社保在缴 公积金在缴</span>
        </div>
      </template>
      <template #right>
        <el-button type="primary" size="small" @click="$router.push('/import')">导入excel</el-button>
        <el-button type="primary" size="small" @click="exportExcel">导出excel</el-button>
        <el-button type="primary" size="small" @click.native="addUser">新增员工</el-button>
      </template>
    </page-tools>
    <el-card style="margin-top: 10px;">
      <el-table border :data="list">
        <el-table-column label="序号" type="index" />
        <el-table-column label="姓名" prop="username" />
        <el-table-column label="工号" prop="workNumber" />
        <el-table-column label="聘用形式">
          <!--
                差值表达式可以支持方法调用不？可以 如果写一个函数调用 渲染的是啥？函数的返回值
                思路：编写一个格式化的函数 在函数里面进行有效的格式化 最后把格式化之后的数据return
              -->
          <template #default="{row }">
            {{ formatEmployment(row.formOfEmployment) }}
          </template>
        </el-table-column>
        <el-table-column label="部门" prop="departmentName" />
        <el-table-column label="入职时间" width="180" prop="correctionTime">
          <template #default="{row }">
            {{ formatTime(row.timeOfEntry) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="200">
          <template #default="{row }">
            <el-button type="text" size="small" @click="goDetail(row.id)">查看</el-button>
            <el-button type="text" size="small" @click="assignRoles(row.id)">分配角色</el-button>
            <el-button type="text" size="small" @click="fetchDelEmploy(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 分页组件 -->
    <div style="height: 60px; margin-top: 10px">
      <el-pagination
        background
        :total="total"
        :current-page="params.page"
        :page-sizes="[20, 30, 40, 50]"
        :page-size="params.size"
        layout="total, prev, pager, next,sizes,jumper"
        @current-change="pageChange"
        @size-change="handleSizeChange"
      />
    </div>
    <!-- 父传子  -> 定义自定义属性 = 要传定的参数 -->
    <!-- 接收子组件传递的数据  接收子组件传递过来的  @自定义事件 = 事件处理函数 获取修改 -->
    <AddeEployee
      :show-dialog="visible"
      @show-dialog="ShowDialog"
    />
    <!-- 分配角色的弹框 -->
    <el-dialog
      class="assign-role"
      title="分配角色"
      :visible="showRoleDialog"
      @open="roleOpen"
      @close="roleClose"
    >
      <!-- 这里准备复选框 -->
      <el-checkbox-group v-model="checkList">
        <!-- 这里的label用来匹配 如果在checkList中找到 就会被选中 -->
        <!--
          问题：显示的是id 选中的也是id值
          预期：显示的中文 选中的id label依旧绑定id作为提交给后端的字段
          然后通过插槽配合差值表达式渲染显示到页面中的中文
         -->
        <el-checkbox
          v-for="item in roleList"
          :key="item.id"
          :label="item.id"
        >
          {{ item.name }}
        </el-checkbox>
      </el-checkbox-group>
      <template #footer>
        <el-button type="primary" size="small" @click="confirmAssign">确定</el-button>
        <el-button size="small" @click="showRoleDialog = false">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
// 实现添加员工功能
// 1. 布局UI 结构  实现添加员工弹出框
// 2. 抽离组件  注册 引用
// 3. 通过 父子传值   实现 弹框打开关闭功能
// 4. 将表单结构  嵌入到 弹框中  实现数据的双向绑定  和 表单验证
// 5. 调接口  拿到后台返回的数据
// 6. 在data 中定义响应式数据  并把后台返回的 数据赋值给 data
// 7. 根据后台返回的数据格式  对 表单页面进行 响应式的 数据绑定
import PageTools from '@/components/PageTools'
import AddeEployee from '@/views/Employee/components/add-employee.vue'
import { getEmployeeList, delEmployee, assignRoles } from '@/api/employee'
import { getRoleList } from '@/api/setting'
import { getUserDetailById } from '@/api/user'
import { getExportData } from '@/utils/excel/excel'

import dayjs from 'dayjs'
export default {
  name: 'Employee',
  components: {
    PageTools,
    AddeEployee

  },

  data() {
    return {
      list: [],
      total: 0,
      showRoleDialog: false,
      visible: false,
      checkList: [], // 选中项的label值
      roleList: [], // 角色列表
      curId: '',
      params: {
        page: 1, // 当前页size: 10 // 每页条数
        size: 20
      }
    }
  },
  mounted() {
    this.fetchList()
  },

  methods: {
    async fetchList() {
      const res = await getEmployeeList(this.params)
      this.list = res.rows
      this.total = res.total
    },
    // 格式化聘用形式函数
    formatEmployment(value) {
      const TYPE = {
        1: '正式',
        2: '非正式',
        3: '临时工',
        4: '合同工'
      }
      return TYPE[value]
    },
    // 时间格式化
    formatTime(value) {
      return dayjs(value).format('YYYY-MM-DD')
    },
    pageChange(page) {
      this.params.page = page
      this.fetchList()
    },
    // 切换分页触发
    handleSizeChange(size) {
      this.params.page = 1
      this.params.size = size
      this.fetchList()
    },
    // 删除员工列表
    fetchDelEmploy(id) {
      // 询问用户
      this.$confirm('确定删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await delEmployee(id)
        this.$message.success('删除成功')
        // 刷新列表
        this.fetchList()
      })
    },
    // 新增员工
    addUser() {
      this.visible = true
    },
    ShowDialog() {
      this.visible = false
    },

    // 导出 excel
    // 1. 找到相应的源码 vendor/Export2Excel.js
    // 2. 安装需要的包
    // 3. 按需导入, 核心语法: import 语法   动态把包加入到项目中 Employee/index
    // 4. 会打印俩个方法  根据需求场景进行调用
    // 5. 调用方法   表格数据body 要求是一个二维数组[ [] ]
    // 6. 基础功能实现后   将静态数据  换成 接口数据
    //      调接口    二次处理数据()
    //      调用getExportData() 方法  赋值给 data.data---->结构{data} -->赋值给body具体数据
    exportExcel() {
      import('@/vendor/Export2Excel').then(async excel => {
        // console.log(excel)
        // excel表示导入的模块对象
        const res = await getEmployeeList(this.params)
        const headerRelation = {
          '姓名': 'username',
          '手机号': 'mobile',
          '入职日期': 'timeOfEntry',
          '工号': 'workNumber',
          '聘用形式': 'formOfEmployment',
          '部门': 'departmentName'
        }
        const { data } = getExportData(res.rows, headerRelation)

        excel.export_json_to_excel({
          header: Object.keys(headerRelation), // 表头 必填
          data: data, // 具体数据 必填
          filename: 'excel-list', // 文件名称
          autoWidth: true, // 宽度是否自适应
          bookType: 'xlsx' // 生成的文件类型
        })
      })
    },
    // 查看员工详情
    goDetail(id) {
      this.$router.push({
        path: '/employeeDetail',
        query: {
          id
        }
      })
    },

    assignRoles(id) {
      // 打开弹框
      this.curId = id
      this.showRoleDialog = true
    },
    async roleOpen() {
      const res = await getRoleList()
      this.roleList = res.rows
      // 获取一下详情
      const detail = await getUserDetailById(this.curId)
      this.checkList = detail.roleIds
    },
    roleClose() {
      this.showRoleDialog = false
      this.checkList = []
    },
    async confirmAssign() {
      await assignRoles({
        id: this.curId,
        roleIds: this.checkList
      })
      // 弹框关闭
      this.roleClose()
      this.$message.success('分配角色成功')
    }
  }
}

</script>

<style lang="scss" scoped>

</style>
